<template>
    <view class="panel">
		<view>Script.js 调试</view>
			<!-- 刷新当前页面 -->
		<button @click="refreshPage()">当前窗口刷新</button>

		<div class="log" v-html="setCircularFenceLog">
			
		</div>
		<button @click="setCircularFence()">sida.setCircularFence</button>

        <!-- <view @click="hanleLogin()">登录</view>

        写入 Storage
        <button @click="saveStorage()">Write</button>

        读取 Storage
        <button @click="readStorage()">Read</button>
        
        <button @click="addListener()">监听 </button>
        <button @click="removeListener()">移去监听</button>

        事件 {{ onfire }}
        <button @click="emit()">Fire</button>
        <br />

        事件监听: $once
        <button @click="addOnceListener()">once</button>
        <br />

        事件监听: $Off
        <button @click="removeOnceListener()">once</button>
        <br />

        {{ once_fire }}
        <button @click="onceFire()">once_fire</button>

        Now:{{ now }}

        {{ userInfo }}

        <view style="height:100px;"></view>

        <button @click="mobileOnLoadEmit()">once_fire</button> -->
    </view>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import {  
	getUserMessage
} from '@/apis/login.js';

export default {
	computed: {
		...mapState(['userinfo']),      
	},
	onLoad() {
		console.log('Mobile App Launch');
		console.log('pages/mobile/index onload');
		uni.$on('mobile-on-load',function() {
			console.log('mobile-on-load');
		});
		if (window.sida) {
			const vm = this;
			console.log('[mobile/index] #setGeoFenceReceiver: sida 包已加载');
			window.sida.setGeoFenceReceiver({
				callback: function(fenceStatusList) {
					fenceStatusList.forEach(item => {
						switch (item.state) {
						case 'STATUS_IN':
							{
								console.log(`[mobile/index] #setGeoFenceReceiver: 用户进入围栏区域: ${item.id}`);
								vm.setCircularFenceLog += `[${item.id}] 进入围栏区域<br />`;
							}
							break;
						case 'STATUS_OUT':
							{
								console.log(`[mobile/index] #setGeoFenceReceiver: 用户离开围栏区域: ${item.id}`);
								vm.setCircularFenceLog += `[${item.id}] 离开围栏区域<br />`;
							}
							break;
						default:
						}
					});
				}
			});
		} else {
			console.error('[mobile/index] #setGeoFenceReceiver: sida 包未加载，请确保已引入 sida 相关脚本');
			console.error('sida 包未加载，请确保已引入 sida 相关脚本');
		}
	},
	unLoad() {
		console.log('pages/mobile/index unLoad');
		uni.$off('mobile-on-load');
	},
	methods:{
		async saveStorage() {
			uni.setStorage({ key: '_now', data: `${(new Date()).getTime()}` });
		},
		readStorage() {
			// 测试读取 storage
			const now = uni.getStorageSync('localPlanIds');
			this.now = now;
			console.log(`now:${now}`);
		},
		addListener() {
			uni.$on('test', (data) => {
				this.onfire = `触发：@${(new Date()).getTime()}`;
				console.log('[mobile/index] listener[test]', data);
			});
		},

		mobileOnLoadEmit() {
			uni.$emit('mobile-on-load', 'onfire');
		},

		emit() {
			var msg = {
				name: 'John', 
				age: 30, 
				isStudent: false, 
				scores: [90, 85, 92, null], 
				address: { city : 'New York', country: 'USA'}
			};

			uni.$emit('test', msg);
		},
		removeListener() {
			uni.$off('test');
		},
 
		onceFire() {
			uni.$emit('once_demo', 'once_demo');
		},

		addOnceListener() {
			console.log('call once_fire_action');
			const vm = this;
			uni.$once('once_demo', (data) => {
				vm.once_fire = `[${data}]@${(new Date()).getTime()}`;
				console.log('[mobile/index] once[test]', data);
			});
		},
		removeOnceListener() {
			uni.$off('once_demo');
		},

		refreshPage() {
			window.FlutterBridge.postMessage(JSON.stringify({
				action: 'reload',
			}));
		},
		async setCircularFence() {
			// 设置圆形围栏
			
			console.log('[mobile/index] #setCircularFence: Call');
			
			if (window.sida) {
				console.log('[mobile/index] #setCircularFence: sida 包已加载');
				window.sida.setCircularFence({
					data: [
						{
							id: 'school_area',
							latitude: 39.908692,
							longitude: 116.397477,
							radius: 500
						},
						{
							id: 'home_area',
							latitude: 39.915590,
							longitude: 116.403954,
							radius: 200
						}
					],
					success: function(result) {
						console.log(`[mobile/index] #setCircularFence: 围栏设置成功 :${JSON.stringify(result)}`);
					},
					fail: function(err) {
						console.log('[mobile/index] #setCircularFence: 围栏设置失败:', err);
					}
				});
			} else {
				console.error('[mobile/index] #setCircularFence: sida 包未加载，请确保已引入 sida 相关脚本');
			}
		},
		// 登录
		async hanleLogin() {
			const phone = '17322920349';

			const params = {
				id: '',
				phone,
				grant_type: 'phone',
				value: '0000000',
				scope: 'all',
			};
			
			const res = await getUserMessage(params, '');

			if (res.code === 200) {
				// uni.hideLoading()
				uni.setStorage({ key: 'userCompanyInfo', data: res.data });
				if (res.data.length <= 0) {
					uni.showModal({
						title: '提示',
						content: '手机号尚未加入通讯录无法登入,请联系公司负责人添加您的信息。',
						success: function (res) {
							if (res.confirm) {
								console.log('用户点击确定');
							}
						}
					});
					return;
				}
				if (res.success) { 
					uni.redirectTo({
						url: `/pages/login/companySelect?phone=${phone}`,
					});
					return;
				}
				uni.showToast({
					title: '验证码错误',
					icon: 'none'
				});
			} else {
				uni.showToast({
					title: res.msg,
					icon: 'none'
				});
			}
		    },
 
	},
	data() {
		return {
			now: '0',
			onfire: '0',
			once_fire:'',
			userInfo: {},
			setCircularFenceLog:''
		};
	}
};
</script>

<style scoped>
	.panel {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 10px;
		padding: 20px;
	}
	.log {
		width: 100%;
		height: 100px;
		border: 1px solid #000;
		overflow: auto;
		padding: 10px;
	}
</style>
